<template>
  <div class="password">

    <x-header :left-options="{showBack: true, backText: ''}" style="">更改密码</x-header>

    <group label-width="100px">
      <x-input title="账号" type="text" :disabled="true" v-model="username"></x-input>
      <x-input title="旧密码" type="password" placeholder="请填写旧密码" v-model="value1"></x-input>
      <x-input title="新密码" type="password" placeholder="请输入新密码" v-model="value2"></x-input>
      <x-input title="确认密码" type="password" placeholder="请再次输入新密码" v-model="value3"></x-input>
    </group>

    <x-button type="primary" @click.native="submit">完成</x-button>

  </div>
</template>

<script>
import { XHeader, Group, Cell, XInput, XButton } from "vux";
import api from "../../../api/index";

export default {
  name: "Changepassword",
  methods: {
    submit() {
      const userid = window.localStorage.getItem("user");

      if (this.value2 != this.value3) {
        this.$vux.alert.show({
          content: "您两次输入的新密码不一致，请重新输入！"
        });
      } else {
        api
          .changepassword({
            id: userid,
            old_password: this.value1,
            new_password: this.value2
          })
          .then(res => {
            if (res.code === 1) {
              this.$router.replace("/user");
            } else {
              this.$vux.alert.show({
                content: "您输入的旧密码不正确，请重新输入！"
              });
            }
          })
          .catch(error => {});
      }
      this.value1 = "";
      this.value2 = "";
      this.value3 = "";
    }
  },
  components: {
    XHeader,
    Group,
    Cell,
    XInput,
    XButton
  },
  data() {
    return {
      username: "",
      value1: "",
      value2: "",
      value3: "",
      code: 0
    };
  },
  //触发事件
  created() {
    this.username = window.localStorage.getItem("username");
  },
  deactivated() {
    this.value1 = "";
    this.value2 = "";
    this.value3 = "";
  }
};
</script>

<style lang="less">
.password {
  padding: 2.875rem 0 0;
  .weui-cells {
    margin: 0;
  }
  .weui-btn {
    margin-top: 10/16rem;
    width: 340/16rem !important;
    background: rgb(214, 60, 50) !important;
  }
}
</style>
